<template>
  <div class="DetailedInformation-box">
    <div class="DetailedInformation-box-header">
      <h2 class="text-class">
        信息详情
      </h2>
    </div>
    <div class="DetailedInformation-box-body">
      <a-card v-show="ifSubscribeFlag" title="信息详情" style="width: 65em">
        <p>设备编号：{{ list.equipmentNumber }}</p>
        <p>上传时间：{{ list.time }}</p>
        <a-card title="设备数据：">
          {{ list.message }}
        </a-card>
      </a-card>
      <a-card v-show="!ifSubscribeFlag" title="未订阅" style="width: 65em">
        <p>请先连接订阅设备</p>
      </a-card>
    </div>
    <div class="DetailedInformation-box-footer">
      图像部分
    </div>

  </div>
</template>

<script>
import { EventBus } from '@/views/dashboard/admin/components/eventBus'

export default {
  name: 'DetailedInformation',
  data() {
    return {
      list: {
        name: '',
        email: ''
      },
      item: null,
      ifSubscribeFlag: false // 是否订阅 默认没订阅
    }
  },
  watch: {
    item() {
      this.list = this.item
    }
  },
  // props: {
  //   item: {
  //     type: Object,
  //     default: null
  //   }
  // },
  created() {
    // 接收 A 发送的事件
    EventBus.$on('aMsg', (msg) => {
      // Subscribe.vue发送来的消息
      this.item = msg
    })
    EventBus.$on('ifSubscribeFlag', (ifSubscribeFlag) => {
      // Subscribe.vue发送来的消息
      this.ifSubscribeFlag = ifSubscribeFlag
    })
  }
}
</script>

<style scoped>
/*信息详情*/
.DetailedInformation-box {
  font-size: 100%;
  display: flex;
  flex-direction: column;
}
.text-class {
  margin: 8px 200px 16px 200px;
  color: white;
}
.DetailedInformation-box-header {
  background-color: #13ce66;
  border-radius: 0.8em;
  text-align-last:justify;
  font-family: "Lucida Console", "Courier New", monospace;
  height: 3em;
  margin-top: 0.5em;
}
/*信息详情内容部分*/
.DetailedInformation-box-body {
  margin: 2em;
  border: 0.2em solid #60a8e7;
  border-radius: 0.3em;
  height: 25em;
  padding: 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/*信息详情图像部分*/
.DetailedInformation-box-footer {
  margin: 2em;
  border: 0.2em solid #60a8e7;
  border-radius: 0.3em;
  height: 20em
}
</style>
